<template>
  <view class="ts-flex ts-column ts-flex-item">
    <view class="ts-section">
      <view class="ts-section-title">
        Banner
      </view>
      <ts-banner image="http://via.placeholder.com/750x375" height="375"></ts-banner>
    </view>
    <ts-gap></ts-gap>

    <view class="ts-section">
      <view class="ts-section-title">
        Icon
      </view>
      <view class="ts-row ts-padding">
        <ts-icon type="person" color="#666666" size="50"></ts-icon>
        <ts-icon type="personadd" color="#666666" size="50"></ts-icon>
        <ts-icon type="person-filled" color="#666666" size="50"></ts-icon>
        <ts-icon type="phone" color="#666666" size="50"></ts-icon>
        <ts-icon type="email" color="#666666" size="50"></ts-icon>
        <ts-icon type="chatbubble" color="#666666" size="50"></ts-icon>
        <ts-icon type="chatboxes" color="#666666" size="50"></ts-icon>
        <ts-icon type="weibo" color="#666666" size="50"></ts-icon>
        <ts-icon type="weixin" color="#666666" size="50"></ts-icon>
        <ts-icon type="chat" color="#666666" size="50"></ts-icon>
        <ts-icon type="qq" color="#666666" size="50"></ts-icon>
      </view>
    </view>
    <ts-gap></ts-gap>

    <view class="ts-section">
      <view class="ts-section-title">
        Badge
      </view>
      <view class="ts-row ts-padding">
        <ts-badge text="primary" type="primary"></ts-badge>
        <ts-badge text="success" type="success" padding-left="20"></ts-badge>
        <ts-badge text="error" type="error" padding-left="20"></ts-badge>
        <ts-badge text="warning" type="warning" padding-left="20"></ts-badge>
      </view>
      <view class="ts-row ts-padding">
        <ts-badge text="primary" type="primary" :inverted="true"></ts-badge>
        <ts-badge text="success" type="success" :inverted="true" padding-left="20"></ts-badge>
        <ts-badge text="error" type="error" :inverted="true" padding-left="20"></ts-badge>
        <ts-badge text="warning" type="warning" :inverted="true" padding-left="20"></ts-badge>
      </view>
    </view>
    <ts-gap></ts-gap>

    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Feedback Star
    </text>
    <view class="ts-row ts-padding">
      <ts-feedback-star :score="4" activeColor="#FFB400"></ts-feedback-star>
    </view>

    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Search Bar
    </text>

    <view class="ts-row ts-padding">
      <ts-search-bar v-model="keywords" placeholder="检索全部"></ts-search-bar>
    </view>

    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Image uploader
    </text>
    <ts-image-uploader :count="5"></ts-image-uploader>

    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Scroll message
    </text>
    <ts-scroll-message :messages="messages"></ts-scroll-message>
    <ts-scroll-message :messages="messages" :vertical="false">
      <block slot="icon">
        <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
      </block>
    </ts-scroll-message>

    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Ad 广告
    </text>
    <ts-ad>
      <ts-banner image="http://via.placeholder.com/750x200" height="200"></ts-banner>
    </ts-ad>

    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Tag
    </text>
    <view class="ts-row ts-padding">
      <ts-tag text="云计算" type="warning"></ts-tag>
      <ts-tag text="云计算" type="error"></ts-tag>
      <ts-tag text="云计算" type="success"></ts-tag>
      <ts-tag text="云计算" type="primary"></ts-tag>
    </view>


    <text class="ts-h4  ts-text-white ts-text-bold ts-padding">
      Button
    </text>
    <view class="ts-row" style="width: 100%;">
      <ts-button type="primary">测试</ts-button>
      <ts-button type="success">测试</ts-button>
      <ts-button type="warning">测试</ts-button>
      <ts-button type="error">测试</ts-button>
    </view>
    <view class="ts-row" style="width: 100%;">
      <ts-button type="primary" :disabled="true">Disabled</ts-button>
      <ts-button type="success" :disabled="true">Disabled</ts-button>
      <ts-button type="warning" :disabled="true">Disabled</ts-button>
      <ts-button type="error" :disabled="true">Disabled</ts-button>
    </view>

    <view class="ts-row" style="width: 100%;">
      <ts-button type="primary" :outlined="true" :border-radius="10">
        <ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
      </ts-button>
      <ts-button type="success" :outlined="true" :border-radius="10">
        <ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
      </ts-button>
      <ts-button type="warning" :outlined="true" :border-radius="10">
        <ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
      </ts-button>
      <ts-button type="error" :outlined="true" :border-radius="10">
        <ts-icon type="email" :size="28" color="#F00"></ts-icon><text>测试</text>
      </ts-button>
    </view>


  </view>
</template>

<script>
  import tsAd from 'components/teaset/components/ts-ad.vue';
  import tsBadge from "components/teaset/components/ts-badge/ts-badge.vue";
  import tsBanner from "components/teaset/components/ts-banner/ts-banner.vue";
  import tsButton from 'components/teaset/components/ts-button/ts-button.vue';
  import tsCityPicker from 'components/teaset/components/ts-city-picker.vue';
  import tsDrawer from "components/teaset/components/ts-drawer.vue";
  import tsIcon from "components/teaset/components/ts-icon/ts-icon.vue";
  import tsImageUploader from 'components/teaset/components/ts-image-uploader/ts-image-uploader.vue';
  import tsLeftCategory from 'components/teaset/components/ts-left-category.vue';
  import tsLoadMore from "components/teaset/components/ts-load-more/ts-load-more.vue";
  import tsPopup from "components/teaset/components/ts-popup/ts-popup.vue";
  import tsPopupAd from "components/teaset/components/ts-popup/ts-popup-ad.vue";
  import tsSegmentedControl from "components/teaset/components/ts-segmented-control/ts-segmented-control.vue";
  import tsSearchBar from "components/teaset/components/ts-search-bar/ts-search-bar.vue";
  import tsTimeline from 'components/teaset/components/ts-timeline/ts-timeline.vue';
  import tsTimelineItem from 'components/teaset/components/ts-timeline/ts-timeline-item.vue';
  import tsFeedbackStar from 'components/teaset/components/ts-feedback-star.vue';
  import tsScrollMessage from 'components/teaset/components/ts-scroll-message.vue';
  import tsTag from 'components/teaset/components/ts-tag/ts-tag.vue'
  export default {
    components: {
      tsAd,
      tsBadge,
      tsBanner,
      tsButton,
      tsCityPicker,
      tsDrawer,
      tsIcon,
      tsImageUploader,
      tsLeftCategory,
      tsLoadMore,
      tsPopup,
      tsPopupAd,
      tsScrollMessage,
      tsSegmentedControl,
      tsSearchBar,
      tsTimeline,
      tsTimelineItem,
      tsFeedbackStar,
      tsTag,
    },
    data() {
      return {
        keywords: '',
        messages: [
          '消息1',
          '消息2',
          '消息3',
        ]
      }
    },
  }
</script>

<style>
  /* 	page view {
		font-size: 36upx;
		display: flex;
		flex-direction: row;
	} */
</style>
